.button-resting {
  border: 1px solid hsla(0, 0%, 100%, 0.2);
  background-color: hsla(191, 71%, 32%, 0);
  color: inherit;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  padding: 4px 10px;
  transition:
    background-color 0.2s ease-in-out,
    border 0.2s ease-in-out,
    color 0.2s ease-in-out;
}

.button-resting:hover {
  background-color: hsla(0, 0%, 100%, 0.1);
  border: 1px solid hsla(0, 0%, 100%, 0.5);
}

.button-resting:hover > span {
  color: hsla(0, 0%, 100%) !important;
}

.button-active {
  /* You can decide how to style the active state */
  background-color: hsla(191, 71%, 32%, 0.8);
  border: 1px solid var(--cyan-2);
}

/* Remove unused styles */
.button-resting:focus {
  outline: none;
}
